<template>
  <div>
    <div class="status-bar" v-for="(item, index) in statuss" :key="index">
      <div class="left">
        <component
          :is="item.icon"
          :style="{
            fontSize: '32px',
            color: item.color,
          }"
        />
      </div>
      <div class="right">
        {{ item.text
        }}<span
          :style="{
            color: item.color,
          }"
          >{{ item.count }}人</span
        >
      </div>
    </div>
  </div>
  <div class="actions">
    <a-button style="margin-right: 20px" type="primary">下一步</a-button>
    <a-button>返回重新上传</a-button>
  </div>
  <div class="table">
    <span>不可导入学员列表</span>
    <a-table></a-table>
  </div>
</template>

<script lang="ts" setup>
import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';

const statuss = [
  {
    icon: CheckCircleFilled,
    count: 5,
    text: `本次可导入员工数量`,
    color: '#52C41A',
  },
  {
    icon: CloseCircleFilled,
    count: 4,
    text: `本次不可导入员工数量`,
    color: '#FF4D4F',
  },
];
</script>

<style lang="scss" scoped>
.status-bar {
  height: 64px;
  box-sizing: border-box;
  border: 1px solid #eeeeee;
  display: flex;
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 30px;
  }
  .left {
    width: 73px;
    height: 100%;
    background: #ffffff;
    border-right: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right {
    flex: 1;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 20px;
    > span {
      color: #52c41a;
      margin-left: 8px;
    }
  }
}
.actions {
  text-align: center;
  margin-bottom: 63px;
}
.table {
  > span {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    margin-bottom: 15px;
    display: block;
  }
}
</style>
